All Categories :
HTML
Chapter 27
Creating HTML Documents with Netscape
Gold
CONTENTS
Up until now, all of the HTML page creation you've done has been
with a standard text editor and a Web browser for viewing. But
that isn't the only way to go. In this chapter and the next few
chapters, you'll learn about some of the programs that are now
making it possible for you to create HTML documents without resorting
to hand entering tags. While some of these products are still
developing, they're at least a great way to create basic sites,
which you can hand edit later.
In this chapter, you'll learn specifically about Netscape Gold,
the special edition of Netscape Navigator that includes the Netscape
Editor. This editor allows you to create HTML documents in a what-you-see-is-what-you-get
(WYSIWYG) environment.
| Note |
Netscape Gold is actually a commercial product available from Netscape Corporation. Netscape offers a shareware "try and buy" deal or (sometimes) a free beta test version of Netscape Gold for general downloading. You might want to visit http://www.netscape.com/ to see what's currently available.
|
| Why Edit By Hand at All? |
I wouldn't be surprised if you were wondering why I bothered to write an entire book about editing HTML by hand when tools like Netscape Gold exist. Well, In my defense, I've got some answers to that.
First, without a pretty solid knowledge of how HTML works, using many HTML editors, especially Netscape Gold, could get you into some trouble. Netscape is particularly bad about giving you options in its menu and button bar without making it clear what standard they adhere to. Netscape extensions are rolled right in with HTML 2.0 and HTML 3.0 level tags and attributes.
Also, many editors, Gold included, don't offer complete support for all of the tags and HTML constructs you might want to use. The Gold editor has no easy way to create HTML tables, for instance, and only a few nods to creating frames.
While it's true that editing basic HTML in these editors can be easier and more convenient than using a plain text editor, I feel like you should know what you're doing, and what's happening behind the scenes. Having read this book, you know how HTML and extension tags work. If Netscape Gold (or others) makes that easier, fine.
Chances are you'll still need to get your hands dirty with HTML to make your pages great.
|
To begin the Netscape Gold HTML Editor, simply choose File,
New, Blank. What appears next is the Netscape Gold HTML
Editor (see fig. 27.1). From here, you can simply begin typing
your HTML document.
Figure 27.1 : The WYSIWYG HTML Editor in Netscape Gold.
| Tip |
Choosing From Template or From Wizard in the New Document menu gives you access to templates and walk-throughs designed by Netscape to make Web document creation easier.
|
The Netscape Gold Editor is really designed to be used much like
a standard word processor. Notice that the toolbar across the
top gives you the option of making text bold, italic, or teletype;
choosing different font sizes; and even inserting images and creating
hyperlink anchors by simply pressing buttons. Using just the toolbar,
it's simple to create a basic HTML page.
For instance, to create a header for your page, enter the text
for the header, like the following:
Welcome to my Page
Then, highlight the text by dragging the mouse pointer from one
end to the other. Now, using the pull-down menu in the Editor's
toolbar, change the text from Normal to Heading 2, or another
heading level. The text will change in the editor window to suggest
the new "look" of your text (see fig. 27.2).
Figure 27.2 : HTML `markup' in Navigator Gold.
Of course, like a good word processor, you could also choose to
change the text to a heading level first and then type. For instance,
use that same pull-down menu to change the appearance to Heading
6. Now, back in the Netscape Editor window, type some text like:
Copyright 1996. Do not duplicate without
permission.
Notice that it comes out looking just as if it were between <H6>
tags (see fig. 27.3).
Figure 27.3 : Changing the HTML types before typing.
In fact, that's exactly what Netscape Gold is doing-it's putting
your text between HTML tags. To prove it, let's try the following
example.
In this example, you'll create a simple HTML document in the Netscape
Gold Editor. Then, you'll take a look at it with your trusty text
editor (like Notepad). You'll see that all Netscape Gold is really
doing is basic HTML markup-it just has a fancy interface.
Enter Listing 27.1 in the Netscape Gold Editor.
Listing 27.1 goldtest.html A
Sample Netscape Gold Document
Products
All of our products here at BigCorp are designed with the consumer
in mind. It's more important to us that you be happy with our
products and services than it is that we make a profit. If we
can make money, so much the better, but we like to think of ourselves
as a charitable organization.
The following is a list of our more popular product lines:
Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction
With that entered, there's some formatting you should do. For
instance, highlight the word "Product" and change it
to a heading (perhaps Heading 2) with the pull-down menu in the
Editor button bar. Then, as your heart desires, change text in
the document to bold, italics, or teletype using the appropriate
buttons. Then, choose File, Save to save the document
as goldtest.htm. Now is when
you see Netscape Gold's secret.
Using WordPad or a similar text editor, open the document goldtest.htm.
Anything look familiar (see fig. 27.4)? Again, this is just regular
HTML markup.
Figure 27.4 : Netscape Gold just creates standard HTML documents.
| Note |
Notice something else about this document? It doesn't quite follow all of the conventions that you've set up for HTML documents in this book. Most documents created by the Gold Editor and others will have slight variations in the way they use HTML tags, especially where the standard itself allows for some flexibility. This isn't necessarily bad, although I believe the way you've learned it in this book is the most complete and elegant. If you disagree with the HTML layout created by a special editor, here's your chance to change it. Just edit away in Notepad!
|
The convenience of the Gold Editor doesn't really stop with basic
HTML markup, either. One of the typical HTML elements you may
want to add to your documents is an HTML list. This is done in
two steps, and you can go about it a number of ways. Start by
entering the text from the previous example:
Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction
Now, highlight all of the above items using the mouse. When you've
got them all selected, choose List Item from the pull-down menu
you used earlier for heading tags. This changes all of the text
to list items, just as if you'd typed them after the list item
tags. It also automatically encloses the list in <UL>
tags, so that the items appear with bullet points next to them
(see fig. 27.5).
Figure 27.5 : Creating lists in the Gold Editor.
As with other markup in the Gold Editor, it's also possible to
select the list item option from the pull-down menu first, then
type your text. All the text you enter will be of type list item
until you change it back to normal or another tag type.
Once you have all of your text entered as list items, changing
the type of list (ordered or unordered) is only a menu item away.
Open the Properties menu and choose Text. The Properties dialog
box appears. Then click the Paragraph tab (see fig. 27.6).
Figure 27.6 : The Properties dialog box with the paragraph tab open.
Changing the list type is simple. In the Additional style
drop-down list box, choose List. Then, in the section marked List,
choose a Style for the list and a Bullet or Number
style if appropriate. Click OK and you've got yourself a new list
type!
| Note |
Notice that this dialog box allows you to use Netscape-specific HTML extensions for bullet types and numbering schemes. If you elect to use these, realize that not all of your users will be able to see them.
|
Definition lists work only slightly different than our other list
types. Starting with the same sample text, let's change it to
a definition list:
Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction
It's okay if you still have this text in the form of another list.
Simply select all of the above text and use the pull-down menu
to change it from normal or list item text to description title
(DT) text. Now this text is treated as if it's <DT>
text between <DL> (definition
list) tags. So far so good.
| Note |
For some reason, Netscape has decided to call HTML definition lists (DL), terms (DT), and definitions (DD) "description lists," "description titles," and "description text," respectively. I guess that makes some sense, but I've never heard those names before either. Don't let them confuse you.
|
The next step is to add text between each <DT>
line. Just use the Return key to create a space between the list
items, and type the text you want to define as your description
text (DD). Then, select that text with the mouse and use the pull-down
menu to change it to DD text. It's that simple (see fig. 27.7).
Figure 27.7 : Creating a definition list.
This one isn't quite as obvious from the outset. It's clear that
Netscape Gold creates new <P>
paragraph tags whenever you simply hit Return in the Editor window
(except when <P> is
inappropriate, as with list elements). But how do you create a
<BR> tag?
Just press Shift+Return on your keyboard. That's all there is
to it. For instance, try entering the following:
How do I love thee?
Press Shift+Return, and then enter the following
Let me count the ways.
Were you to view this in Notepad or WordPad, you'd see that the
<BR> tag has been inserted
where you hit Shift+Return. If you only use the Return key, then
Netscape will use the <P>
tag instead.
Inserting an <HR> tag
is even easier. Simply place the cursor at the point in the document
where you'd like the horizontal ruler to appear, then select Insert,
Horizontal Line from the menu. Your line is then inserted
in the document.
To change the style of your horizontal line, select it in the
Editor window, and then choose Properties, Horizontal
Line. In the Horizontal Lines Properties dialog box that appears,
you can change the dimensions, alignment, and shading for the
line. Click OK when you're done, and the line will change in the
Editor window.
| Note |
Again, these <HR> properties are Netscape-specific. If you change <HR> properties, realize that not all your users will be able to view the modified line.
|
Of course, the Gold Editor allows you to add both hyperlinks and
images to your documents. Both are accomplished through commands
in the Insert menu. You can also create clickable images
rather easily. And, while you can designate a graphic as an image
map, there is currently no way to use the USEMAP
attribute to create client-side image maps in the Gold Editor.
(You can always manually edit files created otherwise in the Gold
Editor.)
Adding a typical hypermedia or hypertext link is just about as
easy as regular markup in the Gold Editor. Simply highlight the
text, choose Insert, Link from the menu, and you're
presented with the Properties dialog box (see fig. 27.8). (You
can also click the Make Link button on the button bar.) Make sure
that the Link tab is selected. Now you can either enter the name
of the URL to the linked document (or file) or you may use the
Browse File button to find the file on your hard drive.
Figure 27.8 : The Properties dialog box.
| Note |
If you're currently not working with files resident on the Web server, remember that you'll need the correct relative path to your files (once they're on the Web server) in this dialog box. So take special care when using the Browse File button.
|
When you've completed entering the URL and clicked OK, the highlighted
text will now act as a link in your Web document.
To add an image file to your document, place your cursor at the
point in the editor where you would like the image to appear.
Then, choose Insert, Image. (You can also click
the Insert Image button on the button bar.) The Properties dialog
box should appear with the Image tab selected. In this dialog
box, enter the URL to the graphic that you want to include. Or,
you can use the Browse button to find the file.
| Note |
With images, using the Browse button actually causes the graphic file to be copied to the current directory. If this isn't what you want, check the Copy image to the document's location checkbox at the bottom of the dialog to turn this feature off. You should also enter absolute URLs in the Image file name field when using graphics already on the Web (or in specific directories on your own Web server).
|
Now, you have some more choices to make. First, you can use the
Alignment section of the Properties dialog box to decide how text
will be aligned relative to the graphic. Remember that only top,
bottom, and middle are recognized in HTML 2.0. (Left and right
are HTML 3.0 level standards.) In the Dimensions section, specify
the height and width for the image. In the Space around image
section, you can decide how much space to put between the image
and surrounding text (see fig. 27.9).
Figure 27.9 : The Properties dialog box with the image tab open.
To cause this graphic to be a clickable image, click the Link
tab and enter an URL in the Link to section. When you click OK,
your graphic should appear in the document, and clicking it should
cause it to appear to act as a clickable image (although your
linked page won't load). To test this for sure, click the View
in Browser button in the Gold Editor's button bar, and test the
document in Navigator.
The Gold Editor automatically adds <HEAD>
and <BODY> tags to
your document, but since you can't edit the HTML directly, the
Editor gives you the opportunity in a dialog box. Choose Properties,
Document. The Document Properties dialog box that appears
allows you to enter various head properties (see fig. 27.10).
Figure 27.10 : Adding information to the document's head.
Notice that this dialog box uses a tabbed interface that will
also allow you to add more advanced head elements as well as background
images and document color information.
Let's take the document you created in Listing 27.2 and add some
of the things you've learned. Enter Listing 27.2 in the Netscape
Gold editor-or use the document you created in the first example.
Listing 27.2 gold2.html Advanced
Editing in Netscape Gold
Products
All of our products here at BigCorp are designed with the consumer
in mind. It's more important to us that you be happy with our
products and services than it is that we make a profit. If we
can make money, so much the better, but we like to think of ourselves
as a charitable organization.
The following is a list of our more popular product lines:
Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction
If you've already turned the product lines into list items, great.
If not, highlight them all together, then choose List Item from
the pull-down menu in the button bar.
Now, select each product line name individually and give each
a hypertext link. Click the Link button in the button bar or choose
Insert, Link from the menu. In the Links dialog
box, enter an URL for your link, or click Browse to choose a local
file. Click OK to change the text to a link.
Next, you'll enter a graphic (use anything handy). Find a good
place in your document for it, andthen click the Image button
or choose Insert, Image. In the Image tab of the
Properties dialog box, give an URL or path for the image, or choose
to Browse for the graphic file. If you'd like this image to be
clickable, choose the Link tab and then enter an URL.
Finally, choose Properties, Document. In the Document
Properties dialog, give your document a title and enter any other
information you feel like giving (name, description, etc.). Click
OK and, as far as this example is concerned, you're done. Try
viewing it in the Netscape Browser (see fig. 27.11).
Figure 27.11 : The final product in Navigator.
You've spent most of this book learning about raw HTML text-how
to create Web documents using nothing more than a text editor.
More and more programs are appearing, though, that try to make
creating HTML documents easier and more friendly. Netscape Gold
is one of those programs.
Creating basic HTML pages is fairly easy, since Netscape Gold
features an Editor interface that's a lot like popular word processors.
Bold, italics, teletype, and other text manipulation is easy.
You can also create HTML lists, add horizontal rulers, and use
the <BR> tags to end
lines.
The heart of your Web site-hyperlinks and images-are easy enough
in Netscape Gold as well. Gold doesn't have great support for
image maps (and no client-side support), but the basics are easy
enough. Plus, once you've created an HTML document in Netscape
Gold, you can always open in a text editor for further enhancements.
- Is it possible to change HTML styles in Netscape Gold before
typing the text for a particular style?
- To what other sort of computer application is Netscape Gold
similar?
- In what type of file does Netscape Gold save your HTML? Can
you edit this with other programs?
- True or false. Changing text to a list item in Netscape Gold
automatically creates an HTML list.
- What menu command allows you to change from an unordered to
an ordered list type?
- What does Netscape Gold call HTML definition lists?
- Is there a menu command for <BR>?
- Why should you be careful when using the Browse button to
create hypertext links?
- How is the Browse button for images different from the Browse
button for hyperlinks?
- Can you type the Title of your document directly in the document
window?
- Use Netscape Gold's definition lists and hyperlinks to create
a page of book reviews. Clicking the book's name shows the user
a graphic of the book. For instance, an entry might be the following:
HTML By Example
The best book ever written for learning HTML the right way.
- Based on the example above, add another definition (DD) line
that includes a link to order the book, the author's name, copyright
information, and price. For instance:
HTML By Example
The best book ever written for learning HTML the right way.
Todd Stauffer, Copyright 1996, $34.99. Order this book.
- Create a button bar interface using Netscape Gold. (No image
map is necessary; just create a series of clickable images.)
- Add client-pull abilities to your Web page using Netscape
Gold.
